<template>
    <!-- 导航 -->
    <nav>
        <div class="banxin tanxin nav_box">
            <img src="../assets/images/indexLogo.png" alt="">
            <ul class="tanxin">
                <li :class=" {active: $route.path ==='/home'}" @click="$router.push('/')">首页</li>
                <li :class=" {active: $route.path ==='/goods'}" @click="$router.push('/goods')">全部商品</li>
                <li :class=" {active: $route.path ==='/user'} " @click="$router.push('/user')">个人中心</li>
                <li :class=" {active: $route.path ==='/order'}" @click="$router.push('/order')">我的订单</li>
                <li :class=" {active: $route.path ==='/free'}" @click="$router.push('/free')">专属福利</li>
            </ul>
            <div class="search tanxin">
                <input type="text" placeholder="搜索全部商品直接回车" @keyup.enter="toSerach" v-model="searchVal">
                <div class="btn">
                    <img src="../assets/images/search.png" alt="">
                </div>
            </div>
            
        </div>
        
    </nav>
</template>

<script>
export default {
    data() {
        return {
            // 搜索框的数据
            searchVal: ''

        }
    },
    methods:{
        toSerach(){
            // console.log(123);
            // 回车跳转
            this.$router.push(`/goods?keyword=${this.searchVal}`)
            // 清空内容
            this.searchVal = ''
        }
      }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

nav {
    background: #fff;
    
    .nav_box {
        align-items: center;
        height: 100px;

        ul {
            width: 500px;

            li {
                font-size: 16px;
                color: @black;
                cursor: pointer;

                &.active {
                    color: @blue;
                    font-weight: bold;
                }
            }
        }

        .search {
            width: 264px;
            height: 40px;
            overflow: hidden;
            input {
                width: 214px;
                height: 40px;
                border: 1px solid #DEDEDE;
                border-radius: 20px 0px 0px 20px;
                box-sizing: border-box;
                text-indent: 1em;
                outline: none;
            }

            .btn {
                width: 50px;
                height: 40px;
                background: #0A328E;
                border-radius: 0px 20px 20px 0px;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
            }
        }
    }
}
</style>